<template>
  <div id="app">
    <router-view
      :allmusic="allmusic"
      :musicOnPlay="musicOnPlay"
      :playStatus="playStatus"
      :unfold="unfold"
      :changePlayStatus="handleChangePlayStatus"
      :changePlayerForm="handleChangePlayerForm"
      :nextMusic="handleNextMusic"
      :lastMusic="handleLastMusic"
      :newMusic="handleNewMusic"
      :openMusicList="handleOpenMusicList"
      :quitApp="handleQuitApp"
    />
  </div>
</template>

<script>
var electron = ''
if (window.require) {
  electron = window.require('electron')
}

export default {
  name: 'App',
  data () {
    return {
      playStatus: false,
      unfold: false,
      allmusic: [],
      musicOnPlay: {},
      musicOnPlayObject: '',
      playList: [],
      pointNow: -1,
      pointTop: -1
    }
  },
  mounted () {
    electron.ipcRenderer.on('route-to-page', (event, message) => {
      console.log(message)
      this.$router.push(message.url)
    })
    electron.ipcRenderer.on('response-to-get-allmusic', (event, message) => {
      console.log(message)
      this.allmusic = message.data
    })
    electron.ipcRenderer.on('response-to-get-music-id', (event, message) => {
      console.log(message)
      this.musicOnPlay = message.data
    })
    electron.ipcRenderer.on('response-to-pick-music', (event, message) => {
      console.log(message)
      alert(message.data)
    })
    electron.ipcRenderer.on('response-to-change-player-form', (event, message) => {
      console.log(message)
      this.unfold = message.unfold
    })
    electron.ipcRenderer.on('wait-to-change-new-music', (event, message) => {
      console.log(message)
      this.handleNewMusic(message)
    })

    electron.ipcRenderer.send('get-allmusic', {})
  },
  methods: {
    handleQuitApp () {
      electron.ipcRenderer.send('quit-app', {})
    },
    handleChangePlayStatus (status) {
      var ps = status
      this.playStatus = ps
      if (ps === true && this.musicOnPlayObject !== '') {
        this.musicOnPlayObject.play()
      } else if (ps === false && this.musicOnPlayObject !== '') {
        this.musicOnPlayObject.pause()
      }
    },
    handleChangePlayerForm () {
      var uf = !this.unfold
      electron.ipcRenderer.send('change-player-form', { unfold: uf })
    },
    handleChangeMusicOnPlay (id) {
      electron.ipcRenderer.send('get-music-id', { id: id })
    },
    handleNextMusic () {
      if (this.pointNow >= this.pointTop) {
        return 0
      }
      var pn = this.pointNow
      this.pointNow = pn + 1
      this.handleChangeMusicOnPlay(this.playList[pn + 1]['music_id'])
      return 1
    },
    handleLastMusic () {
      if (this.pointNow === 0) {
        return ''
      }
      var pn = this.pointNow
      this.pointNow = pn - 1
      this.handleChangeMusicOnPlay(this.playList[pn - 1]['music_id'])
    },
    handleNewMusic (musicInfo) {
      var pn = this.pointNow
      var pl = JSON.parse(JSON.stringify(this.playList))
      pl = pl.slice(0, pn + 1)
      pl.push(musicInfo)
      this.playList = pl
      this.pointTop = pn + 1
      this.pointNow = pn + 1
      this.handleChangeMusicOnPlay(musicInfo['music_id'])
    },
    handleOpenMusicList () {
      electron.ipcRenderer.send('open-music-list', {})
    }
  },
  watch: {
    musicOnPlay (newValue) {
      if (this.musicOnPlayObject !== '') {
        this.musicOnPlayObject.pause()
      }
      var audio = new Audio()
      audio.src = 'http://music.ma-jing.cn' + newValue['music_file_path']
      audio.play()
      audio.addEventListener('ended', () => {
        const r = this.handleNextMusic()
        if (r === 0) {
          const randomNumber = Math.floor(Math.random() * this.playList.length)
          this.handleChangeMusicOnPlay(this.playList[randomNumber]['music_id'])
        }
      })
      this.musicOnPlayObject = audio
      this.playStatus = true
    }
  }
}
</script>

<style>
#app {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
